<template>
  <div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-empty description="智能穿戴收藏为空" v-if="item == ''" />
      <div id="box" v-else>
        <div id="id" v-for="(numb, i) in item" :key="numb.cid">
          <router-link :to="`/goods/${numb.cid}`">
            <clotheList
              :price="item[i].price"
              :time="item[i].time"
              :imgname="item[i].imgname"
              :name="item[i].name"
              :paynumber="item[i].paynumber"
            />
          </router-link>
          <van-icon
            name="delete-o"
            id="aa"
            @click="submit(numb.uid, numb.name)"
          />
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>
<script>
import clotheList from "@/components/clotheList.vue";
import { mapState } from "vuex";
import { getSmart, delSmart } from "@/api/request";
import { Dialog } from "vant";
export default {
  data() {
    return {
      isLoading: false,
      info: "",
      tit: "",
      item: [],
      numb: [],
    };
  },
  methods: {
    submit(information, tii) {
      this.info = information;
      this.tit = tii;

      delSmart({ uid: this.info, name: this.tit }).then((res) => {
        console.log(res);
        if (res.data.status == 200) {
          Dialog({ message: "删除成功" });
          this.a();
        }
      });
    },
    a() {
      getSmart({ uname: this.$store.state.user.uname }).then((res) => {
        console.log(11111111);
        console.log(res);
        this.item = res.data.message;
      });
    },
    onRefresh() {
      setTimeout(() => {
        Toast("刷新成功");
        this.a();
        this.isLoading = false;
      }, 1000);
    },
  },
  mounted() {
    this.a();
  },
  components: {
    clotheList,
  },
  computed: {
    //mapState将开放vuex中保存的user对象到当前组件的计算属性中
    //这样，在当前组件内部,就可以直接使用user来访问vuex中的user
    ...mapState(["user"]),
  },
};
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
  color: #333;
}
#box {
  display: flex;
  flex-wrap: wrap;
  text-align: left;
  margin-left: 6px;
  > #id {
    margin: 0 8px;
    > #aa {
      font-size: 24px;
      position: relative;
      bottom: 55px;
      left: 130px;
      color: #fdd245;
    }
  }
}
</style>